<template>
  <div class="a">
    <div class="item" :class="['order-'+i]" v-for="(v,i) in arr" :key="i">
      <div class="line"></div>
      <div class="con">{{v.a}}</div>
      <div class="des">{{v.b}}</div> 
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      msg:'',
      arr: [
        {a: 'Now', b: 'I'},
        {a: 'Start', b: 'We'},
        {a: 'Future', b: 'You'},
        {a: 'End', b: 'Them'}
      ]
    }
  }
}
</script>
 
<style scoped lang="scss">
  .a{
    width: 800px;
    height: 400px;
    background: url('./img/backg.jpg') no-repeat;
    background-size: cover;
    display: flex;
    flex-flow: row nowrap;
    .item{
      width: 200px;
      height: 200px;
      text-align: center;
      overflow: hidden;
      .con{
        width: 100%;
        height: 148px;
        // height: 0;
        // transform: translateY(152px);
        line-height: 148px;
        font-size: 30px;
        color: rgba($color: #fff, $alpha: .6);
      }
      .des{
        width: 100%;
        height: 50px;
        // opacity: 0;
        // height: 0;
        // transform: translateY(102px);
        line-height: 50px;
        color: rgba($color: #000000, $alpha: .6);
        background: rgba($color: #fff, $alpha: .6);
      }
    }
    .item:nth-child(2n+1) {
      transform: translateY(200px);
    }
    .order-0,.order-1,.order-2,.order-3 {
      animation: actionA 0s linear;
      .line{
        animation: aLine 3s linear;
      }
      .con{
        animation: aCon 3s linear;
      }
      .des{
        animation: aDes 3s linear;
      }
    }
    .order-1 {
      // .line{
      //   animation: aLine 5s linear 5s;
      // }
      // .con{
      //   animation: aCon 5s linear 5s;
      // }
      // .des{
      //   animation: aDes 5s linear 5s;
      // }
    }
    // animation-delay -> bug -> first show
    .order-1 {
      animation: actionA 4s linear;
      .line{
        animation-delay: 3s;
      }
      .con{
        animation-delay: 3s;
      }
      .des{
        animation-delay: 3s;
      }
    }
    .order-2 {
      animation: actionA 6s linear alternate;
      .line{
        animation-delay: 5s;
      }
      .con{
        animation-delay: 5s;
      }
      .des{
        animation-delay: 5s;
      }
    }
    .order-3 {
      animation: actionA 9s linear alternate;
      .line{
        animation-delay: 8s;
      }
      .con{
        animation-delay: 8s;
      }
      .des{
        animation-delay: 8s;
      }
    }
  }
  .line{
    width: 100%;
    // width: 0%;
    // transform: translate(100px,192px);
    height: 2px;
    background: #b6d8ec;     
  }
  
  @keyframes actionA {
    0% {
      opacity: 0;
    }
    95% {
      opacity: 0;    
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes aLine {
    0% {
      width: 0%;
      transform: translate(100px,192px);
    }
    60% {
      width: 100%;
      transform: translate(0px,192px);
    }
    100% {
      width: 100%;
      transform: translate(0px,0px);
    }
  }
  @keyframes aCon {
    0% {
      height: 0;
      transform: translateY(152px);
    }
    60% {
      height: 0;
      transform: translateY(152px);
    }
    100% {
      height: 148px;
      transform: translateY(2px);
    }
  }
  @keyframes aDes {
    0% {
      opacity: 0;
      height: 0;
      transform: translateY(102px);
    }
    60% {
      opacity: 0.2;
      height: 0;
      transform: translateY(102px);
    }
    100% {
      opacity: 1;
      height: 50px;
      transform: translateY(0px);
    }
  }

</style>